<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="send-box com-box">
			<block v-if="type == 0">
				<view class="h2-header">
					<text class="h2-ttl">选择发货方式</text>
				</view>
				<list-cell icon="icon-order" iconColor="#ff0000" title="快递" @eventClick="nextStep(1)"></list-cell>
				<list-cell icon="icon-fahuo" iconColor="#0099ff" title="货车" @eventClick="nextStep(2)"></list-cell>
			</block>

			<block v-if="type == 1">
				<view class="h2-header">
					<text class="h2-ttl">添加发货信息</text>
				</view>

				<view class="row">
					<text class="tit">订单编号</text>
					<view class="value">
						<input class="input" type="text" v-model="shipmentNumber" placeholder="请填写订单编号" />
					</view>
				</view>
			</block>

			<block v-if="type == 2">
				<view class="h2-header">
					<text class="h2-ttl">添加发货信息</text>
				</view>

				<view class="row">
					<text class="tit">发货时间</text>
					<view class="value">
						<date-time-picker placeholder="请选择发货时间" fields="hour" @change="sendTimeChange"></date-time-picker>
					</view>
				</view>
				<view class="row">
					<text class="tit">司机名称</text>
					<input class="input" type="text" v-model="driverName" placeholder="请填写司机名称" />
				</view>
				<view class="row">
					<text class="tit">车牌号</text>
					<input class="input" type="text" v-model="numberPalte" placeholder="请填写车牌号" />
				</view>
				<view class="row">
					<text class="tit">联系方式</text>
					<input class="input" type="text" v-model="driverPhone" placeholder="请填写联系方式" />
				</view>
				<view class="row">
					<text class="tit">发货方式</text>
					<picker class="tip" @change="sendWayChange" :value="sendWay" :range="sendWay">
						<view class="uni-input">
							<text>{{sendWay[sendWayIndex]}}</text>
							<text class="icon icon-arrow_right"></text>
						</view>
					</picker>
				</view>

				<view class="row area-row">
					<text class="tit">驾驶证</text>
					<uni-upimg @change="getImageInfo01" :upimg_preview="driverLicense" :upload_count="1"></uni-upimg>
				</view>
				<view class="row area-row">
					<text class="tit">行驶证</text>
					<uni-upimg @change="getImageInfo02" :upimg_preview="drivingLicense" :upload_count="1"></uni-upimg>
				</view>
			</block>

			<button v-if="type != 0" type="primary" :disabled="submiting" class="add-btn" @click="confirm">确认发货</button>

		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell.vue'
	import uniUpimg from '@/components/uni-upimg.vue'
	import dateTimePicker from '@/components/uni-datetime-picker.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			listCell,
			uniUpimg,
			dateTimePicker,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				allOrder: '',
				shipmentNumber: '',
				driverName: '',
				numberPalte: '',
				driverPhone: '',
				sendTime: '',
				sendWay: ['货车配送'],
				sendWayIndex: 0,
				driverLicense: [],
				drivingLicense: [],
				submiting: false,
				type: 0
			}
		},
		onLoad(option) {
			this.allOrder = option.allOrder
		},
		methods: {
			nextStep(e) {
				this.type = e
			},
			getImageInfo01(e) {
				this.driverLicense = e
			},
			getImageInfo02(e) {
				this.drivingLicense = e
			},
			sendTimeChange(date) {
				this.sendTime = date.year + '-' + date.month2 + '-' + date.day2 + ' ' + date.hour2
				console.log(this.sendTime)
			},
			sendWayChange(e) {
				this.sendWayIndex = e.target.value
			},
			//提交
			confirm() {
				if (this.type == 1) {
					if (!this.shipmentNumber) {
						this.$api.msg('请填写订单编号')
						return
					}
					this.submiting = true
					this.$api.request('/sellerOrder/sendGoodsShip', {
						orderId: this.allOrder,
						shipmentNumber: this.shipmentNumber,
					}, {
						content: 'application/x-www-form-urlencoded',
						failback: failres => {
							this.submiting = false
							this.$api.msg(failres.message)
						}
					}).then(res => {
						this.$api.msg('发货成功')
					})
				}
				if (this.type == 2) {
					if (!this.sendTime) {
						this.$api.msg('请填写发货时间')
						return
					}
					if (!this.driverName) {
						this.$api.msg('请填写司机名称')
						return
					}
					if (!this.numberPalte) {
						this.$api.msg('请填写车牌号')
						return
					}
					if (!this.driverPhone) {
						this.$api.msg('请填写联系方式')
						return
					}
					if (!this.driverLicense) {
						this.$api.msg('请上传驾驶证')
						return
					}
					if (!this.drivingLicense) {
						this.$api.msg('请上传行驶证')
						return
					}
					this.submiting = true
					this.$api.request('/sellerOrder/sendGoodsDriver', {
						orderId: this.allOrder,
						sendTime: this.sendTime,
						driverName: this.driverName,
						numberPalte: this.numberPalte,
						driverPhone: this.driverPhone,
						driverLicense: this.driverLicense.join(','),
						drivingLicense: this.drivingLicense.join(',')
					}, {
						content: 'application/x-www-form-urlencoded',
						failback: failres => {
							this.submiting = false
							this.$api.msg(failres.message)
						}
					}).then(res => {
						this.$api.msg('发货成功')
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-top: 20upx;
	}

	.row {
		.tit {
			width: 150upx;
		}

		.tip {
			flex-basis: 100%;
		}

		.uni-input {
			display: flex;
			justify-content: space-between;
		}
	}

	.area-row {
		height: inherit;
		padding: 20upx $base-row-spacing;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-top: 0;
		}

		.send-box {
			margin: 20px auto;
		}

		.row {
			.tit {
				width: 150px;
			}
		}

		.area-row {
			height: inherit;
			padding: 20px 30px;
		}
	}

	/* #endif */
</style>
